/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

import { CommandDialog, FeatureManager } from '@amcax/base';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import i18n from 'i18next';
import { useEffect, useState } from 'react';
import { PointAxis } from './point-axis';
import { PointBetween } from './point-bet';
import { PointCenter } from './point-center';
import { PointCurve } from './point-curve';
import { PointCurveTangency } from './point-curve-tangency';
import { PointPlane } from './point-plane';
import { PointSurface } from './point-surface';
import { PointProvider } from './PointContext';

function PointDialog({ title, onClose, props }: CurvedCmdDialogParams) {
  const [mode, setMode] = useState<
    | 'coordinate'
    | '2point'
    | 'oncurve'
    | 'onplane'
    | 'onsurface'
    | 'center'
    | 'curve-tangency'
  >('coordinate');

  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.mode ?? 'coordinate');
    setEditProps(props);
    setEditDxid(props?.shape ? props?.shape : props?.dxid);
  }, [props?.shape, props?.dxid]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <PointProvider>
        <CommandLabeledItemWrapper
          className='mt-5 px-5'
          label='点类型'
        >
          <Select
            options={[
              { value: 'coordinate', label: '坐标' },
              { value: '2point', label: '在两点之间' },
              { value: 'oncurve', label: '在曲线上' },
              { value: 'onplane', label: '在平面上' },
              { value: 'onsurface', label: '在曲面上' },
              { value: 'center', label: '圆/球面/椭圆中心' },
              ...(FeatureManager.isFeatureEnabled('cmd-curve-tangency')
                ? [{ value: 'curve-tangency', label: '曲线的切点' }]
                : []),
            ]}
            popupMatchSelectWidth={false}
            value={mode}
            onChange={(val) => {
              if (val !== mode) {
                setMode(val);
                setEditProps(null);
              }
            }}
          />
        </CommandLabeledItemWrapper>
        {mode === 'coordinate' && (
          <PointAxis
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === '2point' && (
          <PointBetween
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === 'oncurve' && (
          <PointCurve
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === 'onplane' && (
          <PointPlane
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === 'onsurface' && (
          <PointSurface
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === 'center' && (
          <PointCenter
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
        {mode === 'curve-tangency' && (
          <PointCurveTangency
            props={editProps}
            onClose={onClose}
            editDxid={editDxid}
          />
        )}
      </PointProvider>
    </CommandDialog>
  );
}

export const cmdPoint: CurvedBaseCommand = {
  id: 'CmdPoint',
  label: 'command.vertex-cycs',
  icon: 'commands/curved/point',
  help: {
    remark: 'tips.redo',
  },
  create: (label, onClose, props) => (
    <PointDialog
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
